/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      tag_list
 * @Description:    JSX文件
 * @Author:         SuPeiSen
 * @CreateDate:     2021/1/20 10:14 上午
 * @UpdateDate:     2021/1/20 10:14 上午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import ProTable, { ProColumns } from '@ant-design/pro-table';
import { message, Tag } from 'antd';
import { SortOrder } from 'antd/lib/table/interface';
import React from 'react';
import {
  deleteCategoryApi,
  getCategoryByAdminApi,
  updateCategoryApi,
} from '@/service/category_api';
import { TagItemType } from '@/type/tag';
import { getTagListApi } from '@/service/tap_api';
import { history } from 'umi';
import { rgbaColorByString } from '@/utils/app_fun';
import { AppConfig } from '@/config/app_config';

const columns: ProColumns<TagItemType>[] = [
  {
    title: '标签id',
    dataIndex: 'id',
    key: 'id',
    search: false,
    editable: false,
  },
  {
    title: 'Tab展示',
    dataIndex: 'tag_color',
    search: false,
    render: (dom, item) => {
      const rgbaColor = rgbaColorByString(item.tag_color);
      return <Tag color={rgbaColor}>{item.tag_name}</Tag>;
    },
  },
  {
    title: '缩略图',
    render: (dom, item) => {
      return (
        <img
          alt={item.tag_name}
          src={AppConfig.ImageDoMain + item.icon_url}
          width="150px"
        />
      );
    },
  },
  {
    title: '操作',
    valueType: 'option',
    render: (text, record, _, action) => [
      // <Link to={{
      //   pathname: "/admin/tag/update_tag",
      //   search: ""
      // }} ></Link>,
      <a
        key={'edit_' + `${record.id}`}
        onClick={() => {
          history.push({
            pathname: '/admin/tag/update_tag',
            query: {
              tag_name: record.tag_name,
              tag_color: record.tag_color,
              id: record.id,
              status: record.status,
              icon_url: record.icon_url,
            },
          });
        }}
      >
        编辑
      </a>,
      <a
        target="_blank"
        key={'delete_' + `${record.id}`}
        onClick={() => {
          deleteCategoryById(record.id, action);
        }}
      >
        删除
      </a>,
    ],
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (dom, item) => {
      if (item.status === 1) {
        return <Tag color="blue">正常</Tag>;
      }
      return <Tag color="red">禁用</Tag>;
    },
    search: false,
  },
];

const deleteCategoryById = async (id: number, action: any) => {
  const success = await deleteCategoryApi(id);
  if (success) {
    action.reload();
    message.success('删除成功');
  } else {
    message.error('删除失败');
  }
};

export default () => {
  const getMenuList = async (
    params: {
      pageSize?: number;
      current?: number;
      keyword?: string;
    },
    sort: {
      [key: string]: SortOrder;
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) => {
    const model = await getTagListApi({
      page: params.current ?? 1,
      limit: params.pageSize ?? 10,
      // "menu_name": params["a"].
    });
    if (model.success) {
      return {
        success: true,
        data: model.data!.data.lists,
        total: model.data!.data.current_page,
      };
    }
    return {
      data: [],
      success: false,
    };
  };

  return (
    <ProTable<TagItemType>
      columns={columns}
      rowKey="id"
      request={getMenuList}
      editable={{
        onSave: async (key, row) => {
          console.log(row);
          const success = await updateCategoryApi(row);
          if (success) {
            message.success('成功');
          } else {
            message.error('失败');
          }
        },
      }}
      pagination={{ pageSize: 10 }}
    />
  );
};
